<template>
  <div
    ref="scrollView"
    class="col-md-9 col-sm-12"
    style="
      padding-left: 40px !important;
      padding-right: 35px !important;
      height: 400px;
      overflow-y: auto;
      background: #f9f9f9;
    "
  >
    <div ref="article" class="article">
      <img
        width="728"
        height="939"
        data-src="https://info.compassedu.hk/info_imgUrl_phpxpCqRL"
        style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
        src="https://info.compassedu.hk/1"
      />

      <div
        ref="hreizonal"
        style="width: 350px; height: 400px; overflow: auto hidden; background-color: red; padding: 10px"
      >
        <div ref="hreizonal___wrap" style="height: 100%; box-sizing: border-box; white-space: nowrap">
          <img
            src="http://config.compassedu.hk/vote/2090_1609306071213.png"
            style="display: inline-block; margin-right: 12px"
          />
          <img
            src="https://info.compassedu.hk/info_imgUrl_phpt9vgnE"
            style="display: inline-block; margin-right: 12px"
          />
          <img
            v-for="(item, index) in imgs"
            :key="index"
            ref="img"
            :src="item.url"
            style="display: inline-block; margin-right: 12px"
          />
        </div>
      </div>

      <img v-for="(item, index) in imgs" :key="index" ref="img" :src="item.url" />

      <div class="article__wrap">
        <div class="article__scrollwrap">
          <!---->
          <div class="article__content">
            <div class="content__html">
              <p style="text-align: justify">
                <strong>文|</strong>
                <span style="text-decoration: underline"
                  ><span style="color: #1890ff; text-decoration: underline"
                    ><a
                      style="color: #1890ff; text-decoration: underline"
                      href="http://www.compassedu.hk/"
                      target="_blank"
                      rel="noopener"
                      >指南者留学</a
                    ></span
                  ></span
                >学员Z<br /><strong
                  ><a href="http://www.compassedu.hk/majr_1568" target="_blank" rel="noopener"
                    ><span style="text-decoration: underline; color: #1890ff">港大工业工程与物流管理</span></a
                  ></strong
                >在读
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                嗨，大家好，我是20fall的z学长，就读于港大ielm，一切顺利的话将在今年12月份毕业。在一整年的学习生活中，我上半年去香港上课，下半年返回大陆先后在虾皮和腾讯做了两份实习。那么在第二学期即将结束之时，让我来对我这一年的感受和思考做一个小小的总结吧。
              </p>
              <p style="text-align: justify">
                <img
                  width="728"
                  height="939"
                  data-src="https://info.compassedu.hk/info_imgUrl_phpxpCqRL"
                  style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
                  src="https://info.compassedu.hk/info_imgUrl_phpxpCqRL"
                />
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                <strong><span class="h1">一、专业介绍</span></strong>
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                首先，先给大家介绍以下我就读的专业，ielm中文名称是<strong>工业工程与物流管理</strong>，这是一个“<strong>多元</strong>”的专业。
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                为什么说他多元呢，因为<strong>申请这个专业的人背景十分多元</strong>，大家本科来自于不同的专业，并不是像大家想象的都是本科学物流的。其次，大家的<strong>去向也很多元</strong>，有的同学去了金融投行，有的去了互联网，有的去了国企央企，有的做了老师或公务员。
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                <strong><span style="background-color: #8bc7ff">01 租房</span></strong>
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                租房的话大多数同学都会选择合租，<strong>港大周围的房价相对来说是所有港校最高的</strong>，<strong>厅长和双人间价格在3000-4500hkd，单人间一般要5500hkd以上</strong>，当然，这只是大概的参考价格。
              </p>
              <p style="text-align: justify">
                <img
                  width="728"
                  height="971"
                  data-src="https://info.compassedu.hk/info_imgUrl_phpfBbupG"
                  style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
                  src="https://info.compassedu.hk/info_imgUrl_phpfBbupG"
                />
              </p>
              <p style="text-align: center"><span class="h6">居民区</span></p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                <strong><span style="background-color: #8bc7ff">02 饮食</span></strong>
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                在香港日常饮食的价格其实基本上和内地深圳、上海等一线城市持平，<strong>正常一顿饭无论是食堂还是一般的小店大概三十港币</strong>。
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                自己做饭的话，水果蔬菜都可以等晚上去超市买打折的，惠康经常会有十块一盒的提子、六元一包的蔬菜。佳宝的肉真得超便宜，我们经常自己煮火锅吃，八九个人可以吃人均60不到的火锅，而且撑到爆。
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                关于饮品，大多数餐馆都会有港式奶茶，学校内的食堂通常七元一杯，奶茶店的价格基本上就是内地的价格；学校里有星巴克，港大师生购买可以打七折，每周二还有指定饮品半价活动，一般十几块就可以喝到星冰乐啦。
              </p>
              <p style="text-align: justify">
                <img
                  width="728"
                  height="970"
                  data-src="https://info.compassedu.hk/info_imgUrl_php7BqHeK"
                  style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
                  src="https://info.compassedu.hk/info_imgUrl_php7BqHeK"
                />
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                <strong><span style="background-color: #8bc7ff">03 出行</span></strong>
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                在香港出行大多数都是公共交通，入学后可以申请学生八达通，<strong>乘坐港铁和巴士可以半价</strong>，这个很香，大家一定要办！毕竟来了香港，谁能忍住一周不出去玩几趟呢。建议大家<strong>出行尽量不要选择的士</strong>，因为真得有点贵，还会有空调费和行李费！
              </p>
              <p style="text-align: justify">
                <img
                  width="728"
                  height="523"
                  data-src="https://info.compassedu.hk/info_imgUrl_phpt9vgnE"
                  style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
                  src="https://info.compassedu.hk/info_imgUrl_phpt9vgnE"
                />
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                <strong><span style="background-color: #8bc7ff">04 购物</span></strong>
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                香港真的是购物天堂，一般的美妆、衣服、电子产品的价格都要比大陆低，而且货源充足，很多在大陆要抢的价格炒得比发行价高很多的产品，在香港基本上都可以买到（至少不会把价格抬得那么过分）。
              </p>
              <p style="text-align: justify">&nbsp;</p>
              <p style="text-align: justify">
                这里分享一个<strong>香港购物省钱的好方法</strong>：在香港购物除了商场本身的折扣和汇率外，有很多商场会发很多<strong>满减购物券</strong>，比如时代广场和崇光等等，基本上等同于五折。这些购物券很多留学群都有人在卖，大家购物之前可以先了解一下~
              </p>
              <p style="text-align: justify">
                <img
                  width="728"
                  height="970"
                  data-src="https://info.compassedu.hk/info_imgUrl_phpdszGAn"
                  style="height: auto; width: 335px; margin: 0.4rem auto; opacity: 1"
                  src="https://info.compassedu.hk/info_imgUrl_phpdszGAn"
                />
              </p>
            </div>
          </div>
          <!---->
          <div class="fixedPlacehpler" style="height: 1rem; background: transparent"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lazyLoadImg from '@bianpengfei/utils/lib/expand/lazyLoadImg'

export default {
  data() {
    return {
      imgs: [...new Array(100)].map((v) => ({
        url: 'https://info.compassedu.hk/info_imgUrl_php7BqHeK?_t=' + Math.random().toString(16).slice(2)
      }))
    }
  },

  mounted() {
    this._lazyImg = lazyLoadImg({
      imgWrapDOM: this.$refs.article,
      scrollView: this.$refs.scrollView
    }).start()
  },

  beforeDestroy() {
    this._lazyImg && this._lazyImg.end() // 关闭监听
  }
}
</script>
